<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             style="-moz-box-shadow:0 4px 20px #333333; -webkit-box-shadow:0 4px 20px #333333; box-shadow:0 4px 20px #333333;">
        <el-menu-item style="height: 70px;line-height: 70px;">
            <el-avatar shape="square" :src="paLogo" :size="70"></el-avatar>
            测试elementUI
        </el-menu-item>
        <el-menu-item style="float: right; height: 70px;line-height: 70px;">
            <el-avatar shape="square" :src="squareUrl"></el-avatar>
            <el-dropdown trigger="click" style="height: 70px;line-height: 70px;display: block;float: right;margin-left: 10px">
                <span class="el-dropdown-link"> LUSHUNJIAN561</span>
                <el-dropdown-menu split-button hide-on-click slot="dropdown" style="padding: 15px">
                    <el-button type="text" icon="el-icon-check" style="padding: 0;">退出登录</el-button><br/>
                    <el-button type="text" @click="drawer = true" icon="el-icon-circle-check" style="padding: 0;margin-top: 15px">个人信息</el-button>
                    <el-drawer
                            title="个人信息"
                            :visible.sync="drawer"
                            direction="rtl"
                            size="50%">
                        <el-table>
                            <el-table-column property="date" label="日期" width="150"></el-table-column>
                            <el-table-column property="name" label="姓名" width="200"></el-table-column>
                            <el-table-column property="address" label="地址"></el-table-column>
                        </el-table>
                    </el-drawer>
                </el-dropdown-menu>
            </el-dropdown>

        </el-menu-item>

    </el-menu>
</template>
<script type="text/ecmascript-6">
    export default {
        name:"headerBar",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                isCollapse: true,
                squareUrl: "../../static/img/avatar.png",
                paLogo:"../../static/img/1.jpeg",
                drawer: false
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
